<template>
  <div class="question-Foot">
    <div class="left-img">
      <img src="../image/skinpicture/ljin221.png" alt="" />
    </div>
    <div class="question">
      <div class="questionOne" v-for="(item, index) in options" :key="index">
        <p>{{ item.title }}</p>
        <div
          class="opOne"
          :class="{ word: item.isColor1 == index }"
          @click="choose(index, item.id, item.content1)"
        >
          {{ item.content1 }}
        </div>
        <!-- 它的一般形式为:<表达式1> ? <表达式2> : <表达式3>; "?"运算符的含义是:先求表达式1的值，如果为真，则执行表达式2，并返回表达式2的结果;如果表达式1的值为假，则执行表达式3，并返回表达式3的结果。 -->
        <div class="opTwo" 
         :class="{ word: item.isColor2 == index }"
        @click="choose2(index, item.id, item.content2)">
          {{ item.content2 }}
        </div>
      </div>
      <div class="refer" @click="refer">完成</div>
    </div>
  </div>
</template>

<script>
import { CoustomizedAPI } from "../../../services/CoustomizedData";
export default {
  data() {
    return {
      options: [
        {
          id: "0",
          title:
            "1.洗完脸后的2-3个小时，不在脸上涂抹任何护肤品和化妆品，你的脸颊",
          content1: "A 非常粗糙，有紧绷感",
          content2: "B 油光满面,能够看到反光(或者轻微出油)",
          isColor1: -1,
          isColor2: -1,
          isOptionA: false,
          isOptionB: false,
        },
        {
          id: "1",
          title: "2.是否经常长痘痘",
          content1: "A 从不长痘",
          content2: "B 经常长痘",
            isColor1: -1,
          isColor2:-1,
          isOptionA: false,
          isOptionB: false,
        },
        {
          id: "2",
          title: "3.在用护肤品的同时，是否经常有刺痛感，脸部泛红的情况？",
          content1: "A 会刺痛，但不泛红",
          content2: "B 不会刺痛，偶尔泛红",
           isColor1: -1,
          isColor2:-1,
          isOptionA: false,
          isOptionB: false,
        },
      ],
      chooseList: [],
      sendList: [],
      SkinType:[]
    };
  },
  methods: {
    choose(index) {
      console.log(index);
      // console.log(content);
      // console.log(this.options[index].id);
    // console.log(JSON.parse(JSON.stringify(this.options.id)))
      // this.options[index].isOptionA = !this.options[index].isOptionA;
    
      if (this.options[index].id == index) {

        if (this.options[index].isOptionA === false) {
            // A变红 B黑
          this.options[index].isColor1 = index
          this.chooseList.push("A") 
          // 当chooseList 已经选了三个值 需要改变数据时

           if (this.chooseList.length > 3) {
             this.options[index].isColor2 = !index
              this.chooseList.splice(index, 1);
           }
          
          this.options[index].isOptionA = !this.options[index].isOptionA;
        }
       
        else {
          this.options[index].isColor1 = !index
          
          this.chooseList.splice(index, 1);
           
          this.options[index].isOptionA = !this.options[index].isOptionA;
           
          // console.log(this.chooseList + "来");
         
          
        }
        //   console.log(this.chooseList); 
        //  console.log(this.options);
      }
    },
    choose2(index) {
      console.log(index);
      if (this.options[index].id == index) {

        if (this.options[index].isOptionB === false) {
          //  取消选择A
          this.options[index].isColor1 = !index
          this.chooseList.splice(index, 1);
        // 选择B
          this.options[index].isColor2 = index
          this.chooseList.push("B") 
          //  改变下一次选择时isOptionB的状态，再次点击取消选择                                                                                                                                                                   
          this.options[index].isOptionB = !this.options[index].isOptionB;
        }
       
        else {
          // 取消选择B时 改变颜色 删除一个
          this.options[index].isColor2 =! index
           this.chooseList.splice(index, 1);
           this.options[index].isOptionB = !this.options[index].isOptionB;
           
          console.log(this.chooseList + "来");
         
          
        }
          console.log(this.chooseList); 
         console.log(this.options);
          
        
      }
    },
    // 发送调取接口获取接口
   async refer() {
      
      this.chooseList.forEach(i => {
        console.log(i);
        this.sendList += i
      });
       
      // console.log(sendList);
      console.log(this.sendList);
      // 必须async awsit 
      var SkinTypeData = await CoustomizedAPI(this.sendList )
      // this.$router.push({ name: "skins" });
     console.log(SkinTypeData.data);
      
       this.SkinType = SkinTypeData.data
      setTimeout(() => {
        this.$router.push({
          name: "skins", query: {
          title:this.SkinType
        } });
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.question-Foot {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  height: 72.5rem;
  .left-img {
    margin-left: -1rem;
    width: 177.14px;
    height: 853.1px;
    margin-top: 4.375rem;
     img{
      width: 100%;
      height: 100%;
     }
  }
  .word {
    color: red;
  }
  .question {
    margin-top: 4.375rem;
    font-size: 30px;
    .questionOne {
      margin-top: 2rem;
      width: 554px;
      p {
        height: 76px;
      }
      .opOne {
        height: 42px;
        margin-top: 1rem;
      }
      .opTwo {
        height: 42px;
      }
    }
  }
  .refer {
    width: 204px;
    height: 64px;
    background: #87a3f7;
    border-radius: 40px 40px 40px 40px;
    line-height: 64px;
    color: #fff;
    text-align: center;
    margin-top: 7rem;
  }
}
</style>
